<%--
  Created by IntelliJ IDEA.
  User: 全谢民
  Date: 2023/10/1
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>我的收藏</title>
    <%--左侧样式--%>
    <link rel="stylesheet" type="text/css" href="${path}/css/user_page_css/user.css">
    <%--头部底部样式--%>
    <link rel="stylesheet" type="text/css" href="${path}/css/user_page_css/home_page.css">
    <%--右侧样式--%>
    <link rel="stylesheet" type="text/css" href="${path}/css/user_page_css/userCollection.css">
    <%--右侧底部样式--%>
    <link rel="stylesheet" type="text/css" href="${path}/css/user_page_css/search.css">
    <%--    导入js--%>
    <script rel="script" type="text/javascript" src="${path}/js/jquery-3.6.4.js"></script>
    <style>
        .main{
            height: 135%;
        }
        .del-collect :hover{
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<%--    前端用户收藏--%>
<%--导入头部--%>
<%@include file="header.jsp" %>
<%--中间内容--%>
<div class="content">
    <div class="main">
        <%--左侧导航键--%>
        <div class="user-profile-nav">
            <h1>个人中心</h1>
            <a class="userBack" onclick="jquery:window.location='userOrderDetail.jsp'">我的订单</a>
            <a class="userBack" style="background-color: #ef4238"
               onclick="jquery:window.location='${path}/servlet/userCollect/userCollectAll?userId=1'">我的收藏</a>
            <a class="userBack" onclick="jquery:window.location='${path}/servlet/userComment/userCommentAll?userId=1'">我的评论</a>

            <a class="userBack" onclick="jquery:window.location='userShoppingAddress.jsp'">收货地址</a>
            <a class="userBack" onclick="jquery:window.location='${path}/servlet/userPersona/selUserPersona?userId=1'">基本信息</a>
            <a class="userBack" onclick="jquery:window.location='userSetUp.jsp'">账号设置</a>
            <%--            登陆方式 /1.手机号验证2.密码 3.邮箱 4.实名认证--%>
            <a class="userBack" onclick="jquery:window.location='userTicketPeople.jsp'">常用购票人</a>
            <%--            姓名/证件类型/身份证号--%>
            <a class="userBack" onclick="jQuery:window.location=''">退出登录</a>
        </div>
        <%--右侧开始--%>
        <div class="collection-container">
            <div class="profile-title">
                我的收藏
            </div>
            <div class="collection-box">
                <c:set var="collectList" value="${requestScope.page.dataList}"></c:set>
                <c:choose>
                    <c:when test="${empty path}">
                        <h2>暂无收藏</h2>
                    </c:when>
                    <c:otherwise>
                        <c:forEach var="cl" items="${collectList}">
                            <%--                ${sl.stageId}--%>
                            <div id="${cl.collectId}">
                                <div class="collect-header">
                                        <%--收藏时间/订单时间--%>
                                        <%--<span class="collect-date">${ol.orders_time}</span>--%>
                                    <span class="collect-id">类型：${cl.activityType}</span>
                                    <span class="del-collect" onclick="del_collect(${cl.collectId})">取消收藏</span>
                                </div>
                                <div class="collect-body">
                                    <div class="poster"><img
                                            src="${path}/images/user_page_images/typeImages/homePageImages/${cl.activityPicture}">
                                    </div>
                                    <div class="collect-content">
                                        <div class="movie-name">《${cl.activityName}》</div>
                                        <div class="cinema-name">${cl.activityAddress}</div>
                                            <%--                                        <div class="hall-ticket">${cl.activityName}</div>--%>
                                        <div class="show-time">
                                                ${cl.activityStartDate}
                                            <c:choose>
                                                <c:when test="${ empty cl.activityFinishDate}">
                                                    开始上映
                                                </c:when>
                                                <c:otherwise>
                                                    -${cl.activityFinishDate}
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </div>
                                    <div class="collect-price">${cl.activityStartRange}￥起</div>
                                    <div class="actions">
                                        <div>
                                            <a class="collect-detail" onclick="detail(${cl.activityId})">查看详情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
                <%--                底部的页码--%>
                <div class="pagination">
                    <div class="el-pagination is-background">
                        <button type="button" disabled="disabled" class="btn-prev">
                            <i class="el-icon el-icon-arrow-left"></i>
                        </button>
                        <ul class="el-pager">
                            <c:forEach var="i" begin="1" end="${page.totalPageCount}">
                                <li
                                        <c:if test="${page.currPageNo==i}">class="number active"</c:if>
                                        <c:if test="${page.currPageNo!=i}">class="number"</c:if>
                                        onclick="jquery:window.location='${path}/servlet/userComment/userCommentAll?userId=1&index=${i}'">${i}</li>
                            </c:forEach>
                        </ul>
                        <button type="button" class="btn-next">
                            <i class="el-icon el-icon-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="footer.jsp" %>
<script>
    function del_collect(collectId) {
        var str = confirm("您确定取消收藏吗?");
        if (str) {
            $.post("${path}/servlet/userCollect/userDelCollect?collectId="+collectId, function (result) {
                if (result > 0) {
                    alert("取消成功！");
                    $("#" + collectId).remove();
                } else {
                    alert("取消失败")
                }
            }, "text");
        }
    }
</script>
</body>
</html>
